<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环语句</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<style>

    .nima{
        min-width: 100px;
        height: 100px;
        background-color: salmon;
        text-align: center;
        font-size: 40px;
        display: inline-block;
        margin: 10px;
    }




</style>
</head>

<body>

    <div id="app">
        <p>迭代字符串</p>
        <div class="nima" v-for="ss in sites">{{ss}}</div>
        <p>迭代对象</p>
        <div style="background-color: dodgerblue;" class="nima" v-for="(k,v,i) in ob">键{{k}} || 值{{v}} || 索引 {{i}}</div>
        <p>迭代整数</p>
        <div style="background-color: chocolate;" class="nima" v-for="i in 25">{{i}}</div>
    </div>

    <script>

        var v=new Vue({
             el: '#app',
            data:{
                sites:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
                ob: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }//
            }
        })



    </script>

</body>
</html>